<template>
  <div>
    <ul class="draft" v-if="draft.length > 0">
      <li v-for="(item, article_id) in draft" :key="article_id">
        <!-- 文章图片 -->
        <div class="draft-picture" v-if="item.article_picture">
          <img :src="item.article_picture" />
        </div>
        <!-- 文章有图显示 -->
        <div v-if="item.article_picture" class="draft-have-picture">
          <div class="draft-title">{{ item.article_title }}</div>
          <span class="draft-label">草稿</span>
          &nbsp;&nbsp;{{ item.article_view_count }} 阅读 ·
          {{ item.article_like_count }} 点赞 ·
          {{ item.article_comment_count }} 评论
          <div class="draft-time">{{ item.article_updatatime }}</div>
        </div>
        <!-- 文章无图显示 -->
        <div class="draft-no-picture" v-else>
          <div class="draft-title">{{ item.article_title }}</div>
          <span class="draft-label">草稿</span>
          &nbsp;&nbsp;{{ item.article_view_count }} 阅读 ·
          {{ item.article_like_count }} 点赞 ·
          {{ item.article_comment_count }} 评论
          <div class="draft-time">{{ item.article_updatatime }}</div>
        </div>
        <!-- 草稿功能 -->
        <div class="draft-function">
          <span @click="draftEditor(item.article_id)">编辑</span>
          <span @click="details(item.article_id)">浏览</span>
          <span @click="draftDelete(item)">删除</span>
        </div>
      </li>
    </ul>
    <el-empty :image-size="200" v-else></el-empty>
    <el-pagination
      v-if="draft.length > 0"
      background
      layout="prev, pager, next"
      :total="pageNum * 10"
      @current-change="currentPage"
      :current-page="page"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "Drafts",
  data() {
    return {
      draft: [], //草稿文章
      page: 1, //页码（默认为1）
      pageNum: "10", //每一页的数量
    };
  },
  mixins: [mixin],
  methods: {
    // 编辑草稿
    draftEditor(id) {
      this.$router.push({
        name: "WriteBlog",
        query: {
          id: id,
        },
      });
    },
    // 切换后页码
    currentPage(val) {
      this.page = val;
      this.draftLoad();
    },
    //草稿加载
    draftLoad() {
      this.$http({
        method: "post",
        xhrFields: { withCredentials: true },
        url: "article/findUserDraft",
        params: {
          pageNum: this.page, //页码（默认为1）
          pageSize: 10,
        },
      }).then(({ data }) => {
        if (data.flag) {
          console.log("草稿箱文章加载成功!");
          if (data.data.total > 0) {
            this.draft = data.data.list;
            this.pageNum = Math.ceil(data.data.total / 10);
          } else {
            this.draft = data.data.list;
            this.pageNum = 1;
          }
        } else {
          console.log("草稿箱文章加载失败!");
        }
      });
    },
    //点击删除
    draftDelete(item) {
      this.$confirm("此操作将永久删除该此草稿, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            method: "post",

            xhrFields: { withCredentials: true },
            url: "article/userDeleteArticle",
            params: {
              article_id: item.article_id,
            },
          }).then(({ data }) => {
            if (data.flag) {
              this.draftLoad();
              this.$message.success("草稿删除成功!");
            } else {
              this.$message.warning("草稿删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message("已取消删除草稿！");
        });
    },
  },
  mounted() {
    this.draftLoad();
  },
};
</script>

<style lang="less" scoped>
.draft {
  width: 100%;
  li {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #e4e7ed;
    color: #777777;
    font-size: 15px;
    position: relative;
    &:last-child {
      margin-bottom: 50px;
    }
    .draft-picture {
      width: 150px;
      height: 100px;
      border: 1px solid #fafafa;
      float: left;
      // padding-left: 180px;
      img {
        width: 100%;
        height: 100%;
        margin-right: 20px;
      }
    }
    .draft-have-picture {
      padding-left: 170px;
    }
    .draft-title {
      width: 100%;
      font-size: 20px;
      letter-spacing: 2px;
      margin: 20px 0px;
      color: #302f2f;
      margin-bottom: 50px;
      white-space: nowrap;
    }
    .draft-label {
      width: 30px;
      font-size: 12px;
      height: 15px;
      padding: 1px;
      text-align: center;
      background-color: #f5f5f5;
      color: #999aaa;
    }
    .draft-function {
      position: absolute;
      bottom: 15px;
      right: 10px;
      span {
        margin: 0px 10px;
        cursor: pointer;
        &:hover {
          color: rgba(255, 0, 0, 0.589);
        }
      }
    }
    .draft-time {
      position: absolute;
      top: 0px;
      right: 20px;
    }
  }
}
.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
</style>